<template>
  <card-layout title="设备运行" class="device-operation" bg="2">
    <template #extra>
      <el-button type="primary" size="small" @click="$emit('closeDevice',4)"><el-icon><SwitchButton /></el-icon>&nbsp; 关闭</el-button>
    </template>
    <div class="content-container">
      <!-- 设备状态统计 -->
      <div class="status-overview">
        <div class="chart-container">
          <div ref="pieChartRef" class="chart"></div>
          <div class="percentage">{{ onlinePercentage }}%</div>
          <div class="chart-label">设备在线率</div>
        </div>
        <div class="stats">
          <div class="stat-item">
            <div class="label">设备总数:</div>
            <div class="value">{{ totalDevices }}</div>
          </div>
          <div class="stat-item">
            <div class="label">在线设备:</div>
            <div class="value online">{{ onlineDevices }}</div>
          </div>
          <div class="stat-item">
            <div class="label">离线设备:</div>
            <div class="value offline">{{ offlineDevices }}</div>
          </div>
        </div>
      </div>

      <!-- 设备列表 -->
      <div class="device-list">
        <div v-for="category in deviceCategories" :key="category.name" class="device-category">
          <div class="category-header" @click="toggleCategory(category)">
            <span>{{ category.name }}</span>
            <el-icon><ArrowDown v-if="!category.expanded" /><ArrowUp v-else /></el-icon>
          </div>
          <div class="category-devices" v-show="category.expanded">
            <div v-for="device in category.devices" :key="device.id" class="device-item">
              <span>{{ device.equipName }}</span>
              <div class="location-icon">
                <el-icon><Location /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </card-layout>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { Close, ArrowDown, ArrowUp, Location } from '@element-plus/icons-vue';
import useChart from '@/hooks/useCharts';
import CardLayout from '@/layouts/CardLayout.vue';
import useOnemapStore from "@/store/modules/onemap";
const props = defineProps({
  gnss: {
    type: Array,
    required: true
  },
  video: {
    type: Array,
    required: true
  },
  dust: {
    type: Array,
    required: true
  },
});
const onemapStore = useOnemapStore();
// 图表引用
const pieChartRef = ref(null);

// 使用 hooks 初始化图表
const { chartInstance: pieChart } = useChart(pieChartRef);

// 设备数据
const totalDevices = ref(10);
const onlineDevices = ref(9);
const offlineDevices = ref(1);

// 计算在线百分比
const onlinePercentage = computed(() => {
  return Math.round((onlineDevices.value / totalDevices.value) * 100);
});

// 设备分类数据
const deviceCategories = ref([
  {
    name: 'GNSS',
    expanded: true,
    devices: props.gnss
  },
  {
    name: '网络摄像机',
    expanded: true,
    devices: props.video
  },
  {
    name: '环境监测仪',
    expanded: true,
    devices: props.dust
  }
]);

// 切换分类展开/折叠状态
const toggleCategory = (category) => {
  category.expanded = !category.expanded;
};

// 初始化饼图
const initPieChart = () => {
  const option = {
    series: [
      {
        type: 'pie',
        radius: ['75%', '100%'],
        avoidLabelOverlap: false,
        startAngle: 225,
        endAngle: -45,
        hoverAnimation: false,
        silent: true,
        label: {
          show: false
        },
        emphasis: {
          scale: false
        },
        data: [
          { value: onlineDevices.value, name: '在线设备', itemStyle: { color: '#4cd964' } },
          { value: offlineDevices.value, name: '离线设备', itemStyle: { color: '#ff9500' } }
        ]
      }
    ]
  };

  pieChart.value.setOption(option);
};

onMounted(() => {
  totalDevices.value = props.gnss.length + props.video.length + props.dust.length
  // 初始化图表
  initPieChart();
});
</script>

<style lang="scss" scoped>
.device-operation {
  box-sizing: border-box;
  height: 100%;
  color: #fff;
  .more-div {
    color: #bbcfff;
    cursor: pointer;
  }
  
  .more-div:active {
    scale: 0.8;
  }

  .content-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    height: 99%;
    overflow: hidden;
    padding: 5px;
    box-sizing: border-box;
    .status-overview {
      // background-color: rgba(16, 65, 125, 0.3);
      // border: 1px solid rgba(31, 198, 255, 0.3);
      border-radius: 4px;
      padding: 10px 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 25px;

      .chart-container {
        position: relative;
        width: 150px;
        height: 130px;

        .chart {
          width: 100%;
          height: 100%;
        }

        .percentage {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 28px;
          font-weight: bold;
          color: #4cd964;
        }
        .chart-label {
          font-size: 14px;
          color: #fff;
          text-align: center;
        }
      }

      .stats {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;

        .stat-item {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .label {
            font-size: 16px;
          }

          .value {
            font-size: 16px;
            font-weight: bold;

            &.online {
              color: #4cd964;
            }

            &.offline {
              color: #ff9500;
            }
          }
        }
      }
    }

    .device-list {
      background-color: rgba(16, 65, 125, 0.3);
      border: 1px solid rgba(31, 198, 255, 0.3);
      border-radius: 4px;
      overflow-y: auto;
      height: 430px;
      .device-category {
        display: flex;
        flex-direction: column;

        .category-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 12px;
          background-color: rgba(31, 198, 255, 0.15);
          border-bottom: 1px solid rgba(31, 198, 255, 0.3);
          cursor: pointer;
          font-weight: bold;
        }

        .category-devices {
          display: flex;
          flex-direction: column;

          .device-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid #164b87;
            cursor: pointer;
            .location-icon {
              color: #ff9500;
            }
          }
        }
      }
    }
  }
}
</style>